<template>
  <!--  估价对话框-->
  <a-modal title="添加型号"
           width="800px"
           :visible="modalData.visible"
           @ok="save"
           @cancel="hideModal">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">

        <a-form-item class="smart-query-form-item" label="所属品牌">
          <a-select v-model:value="queryForm.brandId" allowClear placeholder="选择品牌" style="width: 160px">
            <a-select-option v-for="option in brandOptions" :value="option.id">{{ option.brandName }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item class="smart-query-form-item" label="所属品类">
          <a-select v-model:value="queryForm.category" allowClear placeholder="选择品类" style="width: 160px">
            <a-select-option value="1">手机</a-select-option>
            <a-select-option value="2">平板</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="smart-query-form-item" label="型号名称">
          <a-input v-model:value="queryForm.modelName" placeholder="型号名称" style="width: 160px"/>
        </a-form-item>

        <a-form-item class="smart-query-form-item smart-margin-left10">
          <a-button type="primary" @click="resetPageNumAjaxQuery">
            <template #icon>
              <SearchOutlined/>
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery">
            <template #icon>
              <ReloadOutlined/>
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>

    <a-card :bordered="false" size="small">
      <a-table
          :row-selection="rowSelection"
          :columns="columns"
          :dataSource="tableData"
          :loading="tableLoading"
          :pagination="false"
          bordered
          rowKey="id"
          size="small"
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'category'">
            {{ text === 1 ? '手机' : text === 2 ? '平板' : '未知' }}
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
            v-model:current="queryForm.pageNum"
            v-model:pageSize="queryForm.pageSize"
            :defaultPageSize="queryForm.pageSize"
            :pageSizeOptions="PAGE_SIZE_OPTIONS"
            :show-total="(total) => `共${total}条`"
            :total="total"
            show-less-items
            showQuickJumper
            showSizeChanger
            @change="ajaxQuery"
            @showSizeChange="ajaxQuery"
        />
      </div>
    </a-card>
  </a-modal>

</template>

<script setup>

import {reactive, ref, unref} from "vue";
import {PAGE_SIZE, PAGE_SIZE_OPTIONS} from "/@/constants/common-const";
import {brandApi} from "/@/views/business/data-config/brand/brand-api";
import {smartSentry} from "/@/lib/smart-sentry";
import {modelApi} from "/@/views/business/data-config/model/model-api";

const modalDataDefault = {
  visible: false,
};
let brandOptions = ref([]);
const modalData = reactive({...modalDataDefault});

const queryFormDataDefault = {
  updateTimeBegin: undefined, //修改时间 开始
  updateTimeEnd: undefined, //修改时间 结束
  modelName: undefined, //型号名称
  brandId: undefined, //品牌id
  category: undefined, //品类 1手机 2平板
  pageNum: 1,
  pageSize: PAGE_SIZE,
};
const queryForm = reactive({...queryFormDataDefault});

const columns = ref([
  {
    width: 40,
    align: 'center',
    title: '型号id',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    width: 80,
    align: 'center',
    title: '型号名称',
    dataIndex: 'modelName',
    ellipsis: true,
  },
  {
    width: 80,
    align: 'center',
    title: '所属品牌',
    dataIndex: 'brandName',
    ellipsis: true,
  },
  {
    width: 80,
    align: 'center',
    title: '所属品类',
    dataIndex: 'category',
    ellipsis: true,
  }
]);

const emit = defineEmits(['addModel']);

const tableLoading = ref(false);
const tableData = ref([]);
const total = ref();

const selectedRowIds = ref([]);
const disabledRowIds = ref([]);
const rowSelection = {
  selectedRowKeys: selectedRowIds,
  onChange: (all) => {
    selectedRowIds.value = all;
    console.log(all);
  },
  getCheckboxProps: (record) => ({
    disabled: disabledRowIds.value.findIndex(id => id === record.id) !== -1,
  }),
};


// 查询品牌
async function queryBrand() {
  try {
    let responseModel = await brandApi.queryPage({pageNum: 1, pageSize: 200});
    brandOptions.value = responseModel.data.list;
  } catch (e) {
    smartSentry.captureError(e);
  }
}

// 重置查询条件
function resetQuery() {
  Object.assign(queryForm, queryFormDataDefault);
  ajaxQuery();
}

function resetPageNumAjaxQuery(){
  queryForm.pageNum = 1;
  ajaxQuery();
}
// 查询
async function ajaxQuery() {
  try {
    tableLoading.value = true;
    let responseModel = await modelApi.queryPage(queryForm);
    const list = responseModel.data.list;
    total.value = responseModel.data.total;
    tableData.value = list;
    selectedRowIds.value = disabledRowIds.value;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

function showModal(data) {
  disabledRowIds.value = data.disabledIds;
  selectedRowIds.value = data.disabledIds;
  queryBrand();
  ajaxQuery();
  modalData.visible = true;
}

function hideModal() {
  Object.assign(modalData, modalDataDefault);
  Object.assign(queryForm, queryFormDataDefault);
}

function save() {
  const list = [];
  tableData.value.forEach(item => {
    if (
        selectedRowIds.value.findIndex(i => i === item.id) !== -1&&
        disabledRowIds.value.findIndex(i => i === item.id) === -1
    ) {
      list.push({
        modelId: item.id,
        modelName: item.modelName,
        sort: 0,
        deleteFlag: 0,
        status: 1
      })
    }
  })
  emit('addModel', list);
  hideModal();
}

defineExpose({
  showModal,
});

</script>

<style scoped lang="less">

</style>